<template>
    <div class="nuclehome">
        <Row>
            <Col :xs="24">
                <Input
                    class="w-input"
                    v-model="searchKey"
                    clearable
                    placeholder="任务名称"
                />
                <Button type="primary" @click="loadPage(1)" class="btn">
                    <Icon type="ios-search" size="14" />
                </Button>
                <Button @click="cancel" class="btn">
                    <i class="iconfont icon-gengxin"></i>
                </Button>
            </Col>
        </Row>
        <Table
            class="m-table"
            border
            stripe
            :loading="isloading"
            :columns="columns"
            :data="datalist"
        ></Table>
        <div class="page">
            <Page
                :total="count"
                :current="pageNo"
                :page-size="pageSize"
                show-total
                show-elevator
                @on-change="loadPage"
            />
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data () {
        return {
            isloading: false,
            searchKey: "",
            columns: [
                {
                    title: "排序",
                    key: "iNum",
                    align: "center",
                    width: 70,
                    render: (h, params) => {
                        let iNum =
                            (this.pageNo - 1) * this.pageSize +
                            params.index +
                            1;
                        return h("span", iNum);
                    }
                },
                {
                    title: "任务名称",
                    key: "taskName",
                    align: "center",
                    render: (h, params) => {
                        let taskName = params.row.taskName;
                        if (taskName === "" || taskName == null) {
                            return h("span", "--");
                        } else {
                            return h("span", taskName);
                        }
                    }
                },
                {
                    title: "采集点数",
                    key: "placeNum",
                    align: "center",
                    width: 120,
                    render: (h, params) => {
                        let placeNum = params.row.placeNum;
                        if (placeNum === "" || placeNum == null) {
                            return h("span", "--");
                        } else {
                            return h("span", placeNum);
                        }
                    }
                },
                {
                    title: "计划采集时间",
                    key: "planeBeginTime",
                    align: "center",
                    render: (h, params) => {
                        let planeBeginTime = params.row.planeBeginTime;
                        if (planeBeginTime === "" || planeBeginTime == null) {
                            return h("span", "--");
                        } else {
                            return h("span", planeBeginTime);
                        }
                    }
                },
                {
                    title: "实际开始时间",
                    key: "standardBeginTime",
                    align: "center",
                    render: (h, params) => {
                        let standardBeginTime = params.row.standardBeginTime;
                        if (standardBeginTime === "" || standardBeginTime == null) {
                            return h("span", "--");
                        } else {
                            return h("span", standardBeginTime);
                        }
                    }
                },
                {
                    title: "已采集人数（人）",
                    key: "collectNum",
                    align: "center",
                    render: (h, params) => {
                        let collectNum = params.row.collectNum;
                        if (collectNum === "" || collectNum == null) {
                            return h("span", "--");
                        } else {
                            return h("span", collectNum);
                        }
                    }
                },
                {
                    title: "剩余预约人数（人）",
                    key: "remainNum",
                    align: "center",
                    render: (h, params) => {
                        let remainNum = params.row.remainNum;
                        if (remainNum === "" || remainNum == null) {
                            return h("span", "--");
                        } else {
                            return h("span", remainNum);
                        }
                    }
                },
                {
                    title: "当前采集速度（人 / 分钟）",
                    key: "collectSpeed",
                    align: "center",
                    render: (h, params) => {
                        let collectSpeed = params.row.collectSpeed;
                        if (collectSpeed === "" || collectSpeed == null) {
                            return h("span", "--");
                        } else {
                            return h("span", collectSpeed);
                        }
                    }
                },
                {
                    title: "通道数量（个）",
                    key: "channelsNum",
                    align: "center",
                    render: (h, params) => {
                        let channelsNum = params.row.channelsNum;
                        if (channelsNum === "" || channelsNum == null) {
                            return h("span", "--");
                        } else {
                            return h("span", {
                                domProps: {
                                    innerHTML: channelsNum
                                }
                            });
                        }
                    }
                },
                {
                    title: "操作",
                    key: "operate",
                    align: "center",
                    width: 200,
                    render: (h, params) => {
                        let id = params.row.id;
                        return [
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: "#258afb",
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            window.open(
                                                window.location.protocol +
                                                    "//" +
                                                    window.location.host +
                                                    this.$store.state.prefix +
                                                    "/#/nucleAcidmonitor" +
                                                    "?id=" +
                                                    id
                                            );
                                        }
                                    }
                                },
                                "监控大屏"
                            ),
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: "#399c32",
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.functionJS.queryNavgationTo(
                                                this,
                                                "/index/nucleicacid/missionMonitoring/monitoringlist",
                                                {
                                                    id
                                                }
                                            );
                                        }
                                    }
                                },
                                "采集点列表"
                            )
                        ];
                    }
                }
            ],
            datalist: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            id: null,
            fundcode: false
        };
    },
    created () {},
    mounted () {
        // 首次加载数据
        this.loadPage(this.pageNo);
    },
    methods: {
        srInput () {
            this.info.phone = this.info.phone.replace(/[^0-9]/g, "");
        },
        cancel () {
            this.searchKey = "";
            this.loadPage(1);
        },
        // 加载列表数据
        loadPage (pageNo) {
            this.isloading = true;
            this.pageNo = parseInt(pageNo);
            var params = {};
            params.searchKey = this.searchKey.trim();
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(api.queryRunTimeListPage, params)
                .then((resp) => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        if (resp.data.object.records) {
                            this.datalist = resp.data.object.records;
                            this.isloading = false;
                        } else {
                            this.datalist = [];
                            this.count = 0;
                            this.isloading = false;
                        }
                    } else {
                        this.isloading = false;
                        this.$Message.info("数据异常请稍后重试");
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>
<style lang="less" scoped>
.nuclehome {
    padding: 20px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .btn {
        width: 45px;
        height: 30px;
        line-height: 10px;
    }
    .w-select {
        width: 100px;
    }
    .w-input {
        width: 200px;
    }
    .m-table {
        margin: 10px 0;
    }
    .addbutton {
        background-color: #21c780;
        border: 1px solid #21c780;
    }
    .page {
        text-align: center;
        margin: 20px 0;
    }
}
.w-select {
    width: 100px;
}
.w-input {
    width: 300px;
}
.inputnumber {
    width: 150px;
    background: #fff;
    border: none;
    outline: none;
    text-indent: 10px;
    line-height: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
}
.inputnumber:focus {
    border-color: #5362e1;
}
/deep/ .ivu-modal-wrap {
    .ivu-modal {
        float: right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>
